<template>
    <div class="vip">
        <navbar></navbar>
        <van-card
                :num="num"
                :price="num*10.00"
                desc="超值大会员,买了绝不吃亏,一个月10块"
                title="大会员"
                thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
        >
            <template #tags>
                <van-tag plain type="danger">全部影片✔</van-tag>
                <van-tag plain type="danger">全部小说✔</van-tag>
            </template>
            <template class="plusAndRemove" #footer>
                <a class="el-icon-remove" @click="reduceNum"/>
                <a class="el-icon-circle-plus" @click="plusNum"/>
            </template>
        </van-card>
        <van-submit-bar :price="num*1000" button-text="提交订单" @submit="onSubmit"/>
    </div>
</template>

<script>
    import navbar from "@/components/common/navbar";

    export default {
        components: {navbar},
        name: "ConnectVip",
        data() {
            return {
                order: {
                    pay_amount: ""
                },
                num: 1,
            }
        },
        methods: {
            plusNum() {
                this.num++;
            },
            reduceNum() {
                if (this.num == 1) {
                    this.$msg.fail("最少时长为一个月")
                } else {
                    this.num--;
                }
            },
            onSubmit() {
                this.order.pay_amount = this.num * 10;
                this.$http.post("/order/generateOrder", this.order).then((res) => {
                    if (res.data.code == 0) {
                        this.$router.push({path: "/payment", query: {order: JSON.stringify(res.data.data)}})
                    } else {
                        this.$msg.fail("订单提交失败" + res.data.message)
                    }
                })

            }
        },
        mounted() {
        }
    }
</script>

<style lang="less" scoped>
    .vip {
        .van-card__footer {
            a {
                margin: 5px;
            }
        }

        .dialog {
            img {
                height: 50vh;
                width: 100%;
            }
        }
    }

</style>